<template>
	<view>
		<u-swiper
			:list="parameters.list"
			indicator
			indicatorMode="dot"
			keyName="image"
			circular
			:height="parameters.height"
			:interval="parameters.duration"
			radius="0"
		/>
		<view class="search-bx">
			<view class="c-p-10 coreshop-bg-white coreshop-solid-bottom coreshop-display-flex coreshop-align-center">
				<u-search 
					placeholder="搜门店" 
					v-model="key" 
					shape="square"
					:show-action="false" 
					:animation="false"
					borderColor="#CDCCD0"
					bgColor="#fff"
					:height="40"
					@clear="clear" 
					@search="storeSearch" 
					@custom="storeSearch">
				</u-search>
				<view 
					class="areas coreshop-display-flex coreshop-align-center c-m-l-10" 
					@click="showAreas=true"
				>
					<text class="c-m-r-2">{{area.name}}</text>
					<u-icon name="arrow-down-fill" color="#DA3651" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view v-if="storeList.length>0">
				<view class="coreshop-list" v-for="(item, key) in storeList" :key="key">
					<view class="coreshop-list-item">
						<view class="coreshop-avatar" :style="[{backgroundImage:'url('+ item.logoImage +')'}]" />
						<view class="content c-p-t-0 c-p-b-0">
							<view class="">
								<view class="coreshop-flex coreshop-align-center coreshop-justify-between">
									<view class="line-block coreshop-font-15">{{item.storeName|| ''}}</view>
									<!-- <view class="btn" @click="selectStore(item.id, item.storeName, item.mobile, item.address)">预约</view> -->
								</view>
								<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
									<view class="coreshop-text-red coreshop-font-xs c-m-t-5">门店营业中</view>
									<u-icon name="phone-fill" color="#DA3651" size="20" @click="phoneCall(item.mobile)"></u-icon>
								</view>
							</view>
							<view class="coreshop-font-sm">
								<view class="coreshop-flex coreshop-justify-between coreshop-align-center c-m-t-5 c-m-b-5">
									<view class="coreshop-text-brown">{{item.distanceStr|| ''}}</view>
									<!-- <view class="btn" @click="$u.route('pages/reservation/reservation',{storeName:item.storeName,storeId:item.id})">立即预约</view> -->
									<view class="btn" @click="$u.route('pages/project/reservationList',{storeName:item.storeName,storeId:item.id})">立即预约</view>
								</view>
								<view class="coreshop-text-gray u-line-2">{{item.address|| ''}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 无数据时默认显示 -->
			<view class="coreshop-emptybox" v-else>
				<u-empty 
					:icon="$globalConstVars.apiFilesUrl+'/static/images/empty/history.png'" 
					icon-size="150"
					text="暂无门店列表" 
					mode="list">
				</u-empty>
			</view>
		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
		<u-picker :show="showAreas" :columns="areaList" keyName="name" @cancel="showAreas=false" @confirm="onAreae"></u-picker>
	</view>

</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				parameters:{}, 
				showAreas: false,
				area:{
					name: '佛山市',
					id:440600
				},
				areaList:[],
				storeList: [],
				key: '',
				longitude: '',
				latitude: '',
				page: 1,
				limit: 30,
				loadmore: {
					status:'loadmore'
				},
			}
		},
		onLoad() {
			this.getStoreList('init')
			this.getImgs()
		},
		computed:{ ...mapState(['userStore'])},
		onReachBottom(){
			if (this.loadmore.status === 'loadmore') {
				this.getStoreList('')
			}
		},
		methods: {
			...mapMutations(['setUserStore']),
			onAreae(area){
				this.showAreas = false
				this.area = area.value[0]
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			phoneCall(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile
				})
			},
			//门店搜索
			storeSearch() {
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			clear() {
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			getImgs() {
				this.$u.api.getPageConfig({ code: 'mobile_reservation' }).then(res => {
					if (res.status === true) {
						this.parameters = res.data.items.find(im=>im.widgetCode==='imgSlide').parameters
					}
				})
			},
			getStoreCity(){
				this.$u.api.getStoreCity({
					'key': this.key,
					'longitude': this.longitude,
					'latitude': this.latitude,
				}).then(res=>{
					let list = res.data
					list.unshift({id: 0, name:'全部'})
					this.areaList = [list]
					// this.area = res.data[0]
				})
			},
			//获取门店列表
			getStoreList(type) {
				let _this = this
				// #ifdef MP-WEIXIN
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						// console.log('当前位置的经度1：' + res)
					},
					fail: function() {
						_this.$u.toast('获取您的经纬度坐标失败')
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0'
							_this.latitude = '0'
						}
						let data = {
							'key': _this.key,
							'cityId': _this.area.id,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						if(type==="init"){
							_this.getStoreCity()
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								_this.storeList = [..._this.storeList, ...e.data]
								if (e.otherData.totalCount > _this.storeList.length) {
									_this.loadmore.status = 'loadmore'
									_this.page++
								} else {
									// 数据已加载完毕
									_this.loadmore.status = 'nomore'
								}
							} else {
								_this.$u.toast('门店数据获取失败。')
							}
						})
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude
						_this.latitude = res.latitude
					},
					fail: function() {
						_this.$u.toast('获取您的经纬度坐标失败')
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0'
							_this.latitude = '0'
						}
						let data = {
							'key': _this.key,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								_this.storeList = [..._this.storeList, ...e.data]
							} else {
								_this.$u.toast('门店数据获取失败。')
							}
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../placeOrder/storeList/storeList.scss";
	.areas{
		width: 210rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
